<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
		<script type="text/javascript" src="../../js/boot.js"></script>
		<title>数据库表结构</title>
	</head>

	<body>
		<div class="mini-splitter" style="width: 100%; height: 100%;">
			<div size="240" showCollapseButton="true">
				<div class="mini-fit">
					<div class="mini-toolbar" style="padding: 2px; border-top: 0; border-left: 0; border-right: 0;">
						<a class="mini-button" iconCls="icon-add" onclick="openAddWin()">添加</a>
						<a class="mini-button" iconCls="icon-remove" onclick="doDelete()">删除</a>
						<!--<a class="mini-button" iconCls="icon-remove" plain="true" onclick="output()">删除</a>-->
						<a class="mini-menubutton " iconCls="icon-edit" menu="#popupMenu">操作</a>
						<ul id="popupMenu" class="mini-menu" style="display:none;">
							<li iconCls="icon-ok" onclick="doSave()">保存表结构</li>
							<li iconCls="icon-ok" onclick="doSaveAll()">保存新版本</li>
							<li iconCls="icon-ok" onclick="openUpdateDatabase()">写入数据库</li>
							<li iconCls="icon-ok" onclick="">读取数据库</li>
							<li iconCls="icon-ok" onclick="">导入Excel</li>
							<li iconCls="icon-ok" onclick="">导出Excel</li>
						</ul>
					</div>
					<div id="tableList" class="mini-listbox" style="width:99%;height:94%;" textField="tableName" valueField="tableName">
					</div>
				</div>
			</div>

			<div showCollapseButton="true">
				<div class="mini-fit">
					<div id="fieldGrid" class="mini-datagrid" style="width:100%;height:100%;" showPager="false" allowResize="true" allowCellEdit="true" allowCellSelect="true" editNextOnEnterKey="true" editNextRowCell="true">
						<div property="columns">
							<div field="+" value="+" width="20">+</div>
							<div field="index" type="indexcolumn" width="30"></div>
							<div field="fieldID" visible="false"></div>
							<div name="fieldName" field="fieldName" headerAlign="center" width="150">字段名称
								<input property="editor" class="mini-textbox" style="width:100%;" minWidth="155" />
							</div>
							<div name="propertyName" field="propertyName" headerAlign="center" width="150">属性名称
								<input property="editor" class="mini-textbox" style="width:100%;" minWidth="155" />
							</div>
							<div name="description" field="description" headerAlign="center" width="150">字段说明
								<input property="editor" class="mini-textbox" style="width:100%;" minWidth="155" />
							</div>
							<div type="comboboxcolumn" autoShowPopup="true" name="type" field="type" width="150" align="center" headerAlign="center">数据类型
								<input property="editor" class="mini-combobox" style="width:100%;" data="CONST.get('dataTypes')" />
							</div>
							<div name="size" field="size" headerAlign="center" width="60">字段长度
								<input property="editor" class="mini-spinner" style="width:100%;" minWidth="60" />
							</div>
							<div type="checkboxcolumn" field="pk" width="40" headerAlign="center">主键</div>
							<div type="checkboxcolumn" field="canNull" width="40" headerAlign="center">为空</div>
							<div name="sequence" headerAlign="center">排序</div>
							<div field="-" value="-" width="20">-</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div id="editTableWin" class="mini-window" title="" style="width:380px;height:300px;" showMaxButton="true" showCollapseButton="true" showShadow="true" showToolbar="true" showFooter="true" showModal="true" allowResize="true" allowDrag="true">
			<div id="editTableForm" style="padding:10px;">
				<table align="center">
					<tr>
						<td align="right">数据库名：</td>
						<td align="left"><input id="databaseName" name="databaseName" class="mini-combobox" textField="databaseName" valueField="databaseName" required="true" style="width: 280px;" /></td>
					</tr>
					<tr>
						<td align="right">表名称：</td>
						<td align="left"><input name="tableName" class="mini-textbox" required="true" style="width: 280px;"></td>
					</tr>
					<tr>
						<td align="right">表描述：</td>
						<td align="left"><input name="description" class="mini-textbox" required="true" style="width: 280px;"></td>
					</tr>
					<tr>
						<td align="right">类名：</td>
						<td align="left"><input name="className" class="mini-textbox" style="width: 280px;" /></td>
					</tr>
					<tr>
						<td align="right"></td>
						<td align="left">
							<a class="mini-button" iconCls="icon-save" onclick="doAddTable()">保存</a>
						</td>
					</tr>
				</table>
			</div>
		</div>

		<div id="editFieldWin" class="mini-window" title="" style="width:660px;height:320px;" showMaxButton="true" showCollapseButton="true" showShadow="true" showToolbar="true" showFooter="true" showModal="true" allowResize="true" allowDrag="true">
			<div id="editFieldForm" style="padding:3px;">
				<table align="center">
					<tr>
						<td align="right">字段名：</td>
						<td align="left"><input name="fieldName" class="mini-textbox" required="true" style="width: 240px;"></td>
						<td align="right">属性名：</td>
						<td align="left"><input name="propertyName" class="mini-textbox" required="true" style="width: 240px;"></td>
					</tr>
					<tr>
						<td align="right">数据类型：</td>
						<td align="left"><input name="type" class="mini-combobox" data="CONST.get('dataTypes')" style="width: 240px;" /></td>
						<td align="right">字段说明：</td>
						<td align="left"><input name="description" class="mini-textbox" style="width: 240px;" /></td>
					</tr>
					<tr>
						<td align="right">整数位数：</td>
						<td align="left"><input name="size" class="mini-textbox" style="width: 240px;" /></td>
						<td align="right">小数位数：</td>
						<td align="left"><input name="scale" class="mini-textbox" style="width: 240px;" /></td>
					</tr>
					<tr>
						<td align="right">主键 ：</td>
						<td align="left">
							<div name="pk" class="mini-checkbox" text="" style="width: 240px;"></div>
						</td>
						<td align="right">非空：</td>
						<td align="left">
							<div name="canNull" class="mini-checkbox" text="" style="width: 240px;"></div>
						</td>
					</tr>
					<tr>
						<td align="right">默认值 ：</td>
						<td align="left"><input name="defaultValue" class="mini-textbox" style="width: 240px;" /></td>
						<td align="right">生成策略：</td>
						<td align="left"><input name="policy" class="mini-textbox" style="width: 240px;" /></td>
					</tr>
				</table>
			</div>
		</div>

		<div id="updateWin" class="mini-window" style="width:600px;height:560px;" showMaxButton="true" showCollapseButton="true" showShadow="true" showToolbar="true" showFooter="true" showModal="true" allowResize="true" allowDrag="true">
			<div id="updateForm">
				<div class="mini-toolbar" style="padding:2px;">
					<table style="width:100%;">
						<tr>
							<td width="80px">数据库:</td>
							<td>
								<input id="updateDatabaseName" name="databaseName" class="mini-combobox" textField="databaseName" valueField="databaseName" width="120px" />
								<a class="mini-button" iconCls="icon-save" onclick="doUpdateDatabase()">更新数据库</a>
							</td>
						</tr>
						<tr>
							<td>SQL:</td>
							<td><textarea id="txaSql" class="mini-textarea" style="width:510px;height:450px;"></textarea></td>
						</tr>
					</table>
				</div>
			</div>
		</div>

	</body>

	<script type="text/javascript">
		miniInit();

		var tableList = mini.get("tableList"); // 表定义列表
		tableList.set({
			url: http.getUrl("/admin/table/list.do")
		});

		var databaseName = mini.get("databaseName"); // 表定义列表
		databaseName.set({
			url: http.getUrl("/admin/database/list.do")
		});

		var editTableWin = mini.get("editTableWin"); // 编辑表定义窗口
		var editTableForm = new mini.Form("#editTableForm"); // 表定义表单
		var db1 = new mini.DataBinding();
		db1.bindForm("editTableForm", tableList); // 表定义列表与编辑表单数据绑定
		editTableWin.setTitle("修改表信息");

		var fieldGrid = mini.get("fieldGrid"); // 字段定义列表
		var editFieldWin = mini.get("editFieldWin"); // 编辑字段定义窗口
		var editFieldForm = new mini.Form("#editFieldForm"); // 字段定义表单
		var db2 = new mini.DataBinding();
		db2.bindForm("editFieldForm", fieldGrid); // 字段定义列表与编辑表单数据绑定
		editFieldWin.setTitle("修改表字段信息");

		/*******************************************
		 * 表名的单击事件，切换显示表所包含的所有字段信息
		 *******************************************/
		tableList.on("itemclick", function(e) {
			var item = e.item;
			fieldGrid.setData(item.fields);
			// 过滤只显示需要持久化的字段
			fieldGrid.filter(function(row) {
				return row.presist;
			});
		});

		/*******************************************
		 * 表名的双击事件，弹窗显示表的定义信息
		 *******************************************/
		tableList.on("itemdblclick", function(e) {
			var item = e.item;
			/*var row = tableList.getSelected();
			// debugger
			if(row == null) {
				mini.alert("请先选择要编辑的表名", "提示", null);
				return;
			}*/
			editTableForm.setData(item);
			editTableWin.showAtPos('center', 'middle');
		});

		/*******************************************
		 * 字段表格的渲染事件
		 *******************************************/
		fieldGrid.on("drawcell", function(e) {
			//action列，超连接操作按钮
			if(e.column.name == "sequence") {
				var uid = e.record._uid;
				e.cellStyle = "text-align:center";
				e.cellHtml = '<a href="javascript:fieldGridMoveRow(\'' + uid + '\', -1)">上移</a>&nbsp; ' +
					'<a href="javascript:fieldGridMoveRow(\'' + uid + '\', +2)">下移</a>';
			} else if(e.column.header == "+") {
				e.cellHtml = "+";
			} else if(e.column.header == "-") {
				e.cellHtml = "-";
			}
		});
		// 移动行数据
		function fieldGridMoveRow(row_uid, count) {
			var row = fieldGrid.getRowByUID(row_uid);
			var index = fieldGrid.indexOf(row);
			fieldGrid.moveRow(row, index + count);
		}
		// 标题栏点击事件
		fieldGrid.on("headercellclick", function(e) {
			// 如果点击了标题栏的加号，则增加一行
			if(e.column.header == "+") {
				addField(0);
			}
		});
		// 单元格点击事件
		fieldGrid.on("cellclick", function(e) {
			var data = fieldGrid.getSelected();
			var index = fieldGrid.indexOf(data);
			var header = e.column.header;
			// 如果点击了加号一列的单元格，则在当前行下面增加一行
			if(header == "+") {
				addField(index + 1);
			}
			// 如果点击了减号一列的单元格，则删除当前行
			else if(header == "-") {
				mini.confirm("确认删除该数据信息吗？", "删除操作", function(e) {
					if(e == "ok") {
						fieldGrid.removeRow(data);
					}
				});
			}
		});
		// 在指定的行号处添加一行记录
		function addField(index) {
			fieldGrid.addRow({
				"+": "+",
				"-": "-",
				"type": "变长文本",
				"pk": false,
				"canNull": true
			}, index);
		}
		// 单元格双击击事件，显示字段的详细编辑窗体
		fieldGrid.on("rowdblclick", function(e) {
			// var data = fieldGrid.getSelected();
			editFieldWin.showAtPos('center', 'middle');
		});

		var isOpenAddWin = false;
		/*******************************************
		 * 打开新增窗体
		 *******************************************/
		function openAddWin() {
			isOpenAddWin = true;
			editTableForm.setData({});
			editTableWin.showAtPos('center', 'middle');
		}

		/*******************************************
		 * 保存新增表数据
		 *******************************************/
		function doAddTable() {
			tableList.addItem(editTableForm.getData());
			isOpenAddWin = false;
			editTableWin.hide();
		}

		/*******************************************
		 * 保存一个单表表结构数据至内存中
		 *******************************************/
		function doSave() {
			mini.confirm("确定要保存当前选中的表结构吗？", "确定？",
				function(action) {
					if(action == "ok") {
						var bean = tableList.getSelected();
						var data = {};
						data.databaseName = bean.databaseName;
						data.tableName = bean.tableName;
						data.description = bean.description;
						data.className = bean.className;
						// data.fields = bean.fields;
						data.viewSql = bean.viewSql;
						data.json = mini.encode(bean.fields);
						debugger
						http.post("/admin/table/saveTable.do", data, function(page) {
							if(page.success) {
								mini.alert("保存成功", "提示", null);
							} else {
								mini.alert(page.message, "保存失败", null);
							}
						});
					}
				}
			);
		}

		/*******************************************
		 * 保存所有表结构数据至配置文件中
		 *******************************************/
		function doSaveAll() {
			// versionWin.hide();
			mini.confirm("确定要保存所有表结构吗？", "确定？",
				function(action) {
					if(action == "ok") {
						var data = {};
						debugger
						http.post("/admin/table/saveAll.do", data, function(page) {
							if(page.success) {
								mini.alert("保存成功", "提示", null);
							} else {
								mini.alert(page.message, "保存失败", null);
							}
						});
					}
				}
			);
		}

		var updateWin = mini.get("updateWin"); // 编辑表定义窗口
		var updateForm = new mini.Form("#updateForm"); // 表定义表单
		updateWin.setTitle("更新数据库表结构");
		var updateDatabaseName = mini.get("updateDatabaseName");
		var updateSqlMap = {};

		/*******************************************
		 * 打开数据库表结构变更SQL语句清单
		 *******************************************/
		function openUpdateDatabase() {
			mini.confirm("确定要更新数据库表结构吗？", "确定？",
				function(action) {
					if(action == "ok") {
						http.get("/admin/table/getUpdateSql.do", function(page) {
							if(page.success) {
								var data = page.data;
								var list = [];
								for(var key in data) {
									list.push({
										"databaseName": key
									});
								}
								if(list.length == 0) {
									mini.alert("没有需要更新的表结构", "报告", null);
									return;
								}
								debugger
								updateSqlMap = data;
								updateDatabaseName.setData(list);
								updateDatabaseName.select(0);
								mini.get("txaSql").setValue(updateSqlMap[list[0].databaseName]);
								updateSqlMap = data;
								updateWin.showAtPos('center', 'middle');
							} else {
								mini.alert(page.message, "操作失败", null);
							}
						});
					}
				}
			);
		}

		/*******************************************
		 * 执行数据库变更SQL语句
		 *******************************************/
		function doUpdateDatabase() {
			var sql = mini.get("txaSql").getValue();
			if(sql == "") {
				mini.alert("SQL文不能为空！", "提示", null);
				return;
			}
			mini.confirm("确定要更新数据库表结构吗？", "确定？",
				function(action) {
					if(action == "ok") {
						var name = updateDatabaseName.getSelected().databaseName;
						var data = {
							"databaseName": name,
							"sql": sql
						};
						debugger
						http.post("/admin/table/updateDatabase.do", data, function(page) {
							if(page.success) {
								mini.alert("数据库表结构更新成功", "提示", null);
							} else {
								mini.alert(page.message, "保存失败", null);
							}
						});
					}
				}
			);
		}

		/*******************************************
		 * 删除表
		 *******************************************/
		function doDelete() {
			if(tableList.getSelected()) {
				mini.confirm("确定要删除选中的表结构吗？", "确定？",
					function(action) {
						if(action == "ok") {
							var table = tableList.getSelected();
							var data = {
								"databaseName": table.databaseName,
								"tableName": table.tableName
							};
							http.post("/admin/table/deleteTable.do", data, function(page) {
								if(page.success) {
									mini.alert("数据库表结构删除成功", "提示", null);
									tableList.removeItem(tableList.getSelected());
									fieldGrid.setData([]);
								} else {
									mini.alert(page.message, "操作失败", null);
								}
							});
						}
					});
			} else {
				mini.alert("请先选择要删除的表！", "错误", null);
			}
		}
	</script>

</html>